<template>
	<scroll-view scroll-y class="scrollSty" @scrolltolower="scrolltolowerFnc" @scroll="pageScroll">
		<!-- 全国送 -->
		<view class="" style="position: relative;">
			<!-- 滚动搜索 -->
			<view class="scrollSearch" v-if="isSeach" @click="gotoPath('/pages/searchPage/searchPage')">
				<view class="search-input">
					请输入搜索内容~
				</view>
			</view>
			
			<!-- 搜索 -->
			<hwxcSearch />
			
			<view class="nationwideDelivery_content">
				<!-- 轮播图 -->
				<hwxcSwiper :swiperList="swiperListData" />

				<view class="nationwideDelivery_content_classify">
					<!-- 商品分类 -->
					<hwxcShopClassify :classifyList="shopClassify" @getPath="(val) => gotoPath(`/pages/shopping/shopping?category_id=${val.id}`)" />
				</view>

				<!-- 轮播图 -->
				<hwxcSwiper :swiperList="swiperListOptionData" />

				<view style="height: 30rpx"></view>

				<!-- 场馆 -->
				<hwxcVenue :venueList="venueListData" />

				<!-- 爆品专区 -->
				<view class="explosiveGoods" @click="gotoPath('/pages/explosiveGoods/explosiveGoods')">
					<image :src="imageUrls(commInitInfo.index_hot_img)" style="width: 100%; height: 100%"></image>
				</view>

				<!-- 品牌 -->
				<view class="storeContent">
					<view class="store-header">
						<view class="name">品牌门店</view>
						<view class="gd" @click="gotoPath('/pages/storeList/storeList')">
							更多
							<uni-icons type="right" size="16" color="#333"></uni-icons>
						</view>
					</view>
					<view v-if="cloudStoreListData.length > 0">
						<hwxcBrand v-for="(item, index) in cloudStoreListData" :key="item.id" :cloudStoreInfo="item" brandType="0" />
					</view>
				</view>

				<!-- 分类商品 -->
				<view class="shopClassify">
					<view class="store-header">
						<view class="name">推荐商品</view>
						<view class="gd" @click="gotoPath('/pages/shopping/shopping')">
							更多
							<uni-icons type="right" size="16" color="#333"></uni-icons>
						</view>
					</view>
					<view class="shopClassify_shopList" v-if="shopListData.length > 0">
						<hwxcShopItem :shopList="shopListData" shopType="0" />
					</view>
				</view>
			</view>

			<!-- 首页广告 -->
			<view class="homeAdvertisement" v-if="commInitInfo.start_img">
				<u-overlay :show="show">
					<view class="warp">
						<view class="rect">
							<image
								:src="imageUrls(commInitInfo.start_img)"
								mode="widthFix"
								style="width: 600rpx; border-radius: 24rpx"
								@click.stop="gotoPath('/pages/shopping/shopping')"
							></image>
							<view class="stop" @click="show = false">
								<uni-icons type="closeempty" size="17"></uni-icons>
							</view>
						</view>
					</view>
				</u-overlay>
			</view>
			
			<hwxcTabbar/>
		</view>
	</scroll-view>
</template>

<script>
import hwxcSearch from '../../components/hwxcSearch/hwxcSearch.vue';
import hwxcSwiper from '../../components/hwxcSwiper/hwxcSwiper.vue';
import hwxcShopClassify from '../../components/hwxcShopClassify/hwxcShopClassify.vue';
import hwxcVenue from '../../components/hwxcVenue/hwxcVenue.vue';
import hwxcBrand from '../../components/hwxcBrand/hwxcBrand.vue';
import hwxcShopItem from '../../components/hwxcShopItem/hwxcShopItem.vue';
import hwxcTabbar from '../../components/hwxcTabbar.vue';
import { homeBanner, homeCategory, homeGoodsList, cloudVenueList, commonInit } from '../../api/home/index.js';
import { cloudStoreList } from '../../api/merchant/index';
import { imageUrl } from '../../utils/tools';
export default {
	data() {
		return {
			// 广告弹窗状态
			show: false,
			// 轮播图数据
			swiperListData: [],
			// 居中轮播图
			swiperListOptionData: [],
			// 商品分类
			shopClassify: [],
			// 商品参数
			shopQuery: {
				page: 1,
				limit: 10,
				category_id: '',
				type: '0',
				store_id:'0'
			},
			// 商品数据
			shopListData: [],
			// 品牌门店数据
			cloudStoreListData: [],
			// 投放时间
			imagesTime: '',
			// 场馆数据
			venueListData: [],
			commInitInfo: {},

			isSeach: false
		};
	},

	components: {
		hwxcSearch,
		hwxcSwiper,
		hwxcShopClassify,
		hwxcVenue,
		hwxcBrand,
		hwxcShopItem,
		hwxcTabbar
	},

	onShareAppMessage() {
		return {
			title: '全国送',
			path: 'pages/nationwideDelivery/nationwideDelivery'
		};
	},

	onShareTimeline() {
		return {
			title: '全国送',
			query: 'pages/nationwideDelivery/nationwideDelivery'
		};
	},

	async onLoad() {
		
		await this.getCommonInit();
		await this.getHomeBanner();
		this.getHomeCategory();
		this.getHomeGoodsList();
		this.getCloudStoreList();
		this.getcloudVenueList();

		// 判断是否在广告投放时间
		if (this.commInitInfo.start_img_time) {
			const imageTimeList = this.commInitInfo.start_img_time.split(' - ');
			// 当前时间时间戳
			const timestamp = Date.now();
			if (timestamp >= new Date(imageTimeList[0]).getTime() && new Date(imageTimeList[1]).getTime() >= timestamp) {
				this.show = true;
			} else {
				this.show = false;
			}
		}
	},

	methods: {
		gotoPath(path) {
			uni.navigateTo({
				url: path
			});
		},

		pageScroll(event) {
			const { scrollTop } = event.detail;
			if (scrollTop > 300) {
				this.isSeach = true;
			} else {
				this.isSeach = false;
			}
		},

		async getCommonInit() {
			// 初始化
			try {
				const resData = await commonInit({
					version: '1.0.1'
				});
				if (resData.code == 1) {
					this.commInitInfo = resData.data;
					this.$store.dispatch('getCommInitInfoAsync', resData.data);
				} else {
					uni.showToast({
						title: '初始化失败',
						icon: 'error'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		imageUrls(url) {
			return imageUrl(url);
		},

		// 获取轮播图
		async getHomeBanner() {
			try {
				const resData = await homeBanner();
				let list = resData.data;
				const commInitInfo = this.commInitInfo;
				list.forEach((item) => {
					item.image = commInitInfo.uploaddata.cdnurl + item.image;
					if (item.position == 0) {
						this.swiperListData.push(item);
					} else if (item.position == 1) {
						this.swiperListOptionData.push(item);
					}
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取商品分类
		async getHomeCategory() {
			try {
				const resData = await homeCategory();
				this.shopClassify = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取商品数据
		async getHomeGoodsList() {
			try {
				const resData = await homeGoodsList(this.shopQuery);
				let list = resData.data.data || [];
				const shopListData = [...(this.shopListData || []), ...list];
				shopListData.forEach((item) => {
					item.image = imageUrl(item.fileUrl);
				});
				this.shopListData = shopListData;
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取门店列表
		async getCloudStoreList() {
			try {
				const resData = await cloudStoreList({
					page: '1',
					limit: '6'
				});
				const list = resData.data.data;
				if (cloudStoreList.length > 0) {
					this.cloudStoreListData = list.filter((item) => {
						return item.product.length > 0;
					});
				} else {
					this.cloudStoreListData = [];
				}
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取场馆
		async getcloudVenueList() {
			try {
				const resData = await cloudVenueList();
				this.venueListData = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 触底加载
		scrolltolowerFnc() {
			this.shopQuery.page++;
			this.getHomeGoodsList();
		}
	}
};
</script>

<style>
page {
	height: 100%;
	display: flex;
	flex-direction: column;
}
</style>

<style scoped lang="scss">
.scrollSty {
	flex: 1;
	overflow: scroll;
}
.search-ceiling {
	width: 100%;
	padding: 20rpx;
	background-color: #000;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
}
.nationwideDelivery_content {
	background-color: #f3f3f3;
	box-sizing: border-box;
	padding: 20rpx;
	.nationwideDelivery_content_classify {
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 12rpx;
		margin: 20rpx 0px;
		min-height: 360rpx;
	}
	.advertisingSpace {
		height: 300rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-top: 10rpx;
	}
}

.explosiveGoods {
	margin-top: 20rpx;
	height: 300rpx;
	border-radius: 20rpx;
	background-color: #fff;
}

.storeContent {
	.store-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 90rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0px 20rpx;
		border-radius: 10rpx;
		.name {
			font-size: 32rpx;
			font-weight: bold;
		}
		.gd {
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}
	}
}

.shopClassify {
	margin: 20rpx 0px;
	margin-bottom: 0px;
	.store-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 90rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0px 20rpx;
		border-radius: 10rpx;
		.name {
			font-size: 32rpx;
			font-weight: bold;
		}
		.gd {
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}
	}
	.shopClassify_tagsList {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx 0;
		border-radius: 24rpx;
		.tagsItem {
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: column;
			.tagsName {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 6rpx;
			}

			.tagsDes {
				font-size: 24rpx;
				display: inline-block;
				padding: 4rpx 20rpx;
				border-radius: 24rpx;
			}

			.tagsDesActive {
				background-color: red;
				color: #fff;
			}
		}

		.active {
			color: red;
		}
	}

	.shopClassify_shopList {
		margin-top: 20rpx;
	}
}

.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	.stop {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.rect {
	position: relative;
}

.scrollSearch{
	position: sticky;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: #e43927;
	height: 50px;
	z-index: 9999999;
	box-sizing: border-box;
	padding: 8px;
	.search-input{
		height: 100%;
		width: 100%;
		background-color: #fff;
		border-radius: 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0px 30rpx;
		color: #999;
		font-size: 14px;
	}
}
</style>
